/**
 * 文字转图片
 */

const _text2imgSettings = {
  canvas: document.createElement('canvas'), //canvas对象，必填，不填写默认创建一个canvas
  canvasWidth: 650, //canvas的宽度
  canvasMinHeight: 50, //canvas的最小高度,如果不需要可以设置为0
  drawStartX: 10, //绘制字符串起始x坐标
  drawStartY: 15, //绘制字符串起始y坐标
  lineHeight: 60, //文字的行高
  font: '35px \'Microsoft Yahei\'',//文字样式
  text: '请修改掉默认的配置', //需要绘制的文本
  drawWidth: 650, //文字显示的宽度
  color: '#999', //文字的颜色
  backgroundColor: '#fff' //背景颜色
};

export const text2img = {
  set: function (options) {
    if (!!options && typeof options === 'object') {
      for (let i in options) {
        _text2imgSettings[i] = options[i];
      }
    }
    return this;
  },
  draw: function (text) {
    if (!text) {
      text = _text2imgSettings.text;
    }
    return this._draw(text);
  },
  _draw: function (text) {
    const canvas = _text2imgSettings.canvas;
    canvas.width = _text2imgSettings.canvasWidth;
    let ctx = canvas.getContext('2d');
    ctx.font = _text2imgSettings.font;
    ctx.fillStyle = _text2imgSettings.color;

    let lineWidth = 0;
    let lastTextIndex = 0;
    let arr = [];
    for (let i = 0; i < text.length; i++) {
      lineWidth = ctx.measureText(text.substr(lastTextIndex, i - lastTextIndex)).width;
      if (lineWidth > _text2imgSettings.drawWidth) {
        if (this._judgePunctuationMarks(text[i - 1])) {
          arr.push(text.substr(lastTextIndex, i - lastTextIndex));
          lastTextIndex = i;
        } else {
          arr.push(text.substr(lastTextIndex, i - lastTextIndex - 1));
          lastTextIndex = i - 1;
        }
      }
      if (i === text.length - 1) {
        arr.push(text.substr(lastTextIndex, i - lastTextIndex + 1));
      }
    }
    canvas.height = arr.length * _text2imgSettings.lineHeight;
    if (canvas.height < _text2imgSettings.canvasMinHeight) {
      _text2imgSettings.drawStartY += (_text2imgSettings.canvasMinHeight - canvas.height) / 2;
      canvas.height = _text2imgSettings.canvasMinHeight;
    }
    ctx.fillStyle = _text2imgSettings.backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = _text2imgSettings.font;
    ctx.textBaseline = 'middle';
    ctx.fillStyle = _text2imgSettings.color;
    for (let i = 0; i < arr.length; i++) {
      ctx.fillText(arr[i], _text2imgSettings.drawStartX, _text2imgSettings.drawStartY + i * _text2imgSettings.lineHeight);
    }

    return canvas.toDataURL();
  },
  jqTextReplace: function (el) {
    if (typeof (jQuery) === 'undefined') {
      throw ('方法需要jquery的支持');
    }
    if (!el instanceof jQuery) {
      throw ('不是一个正确的jQuery对象');
    }
    if (el.length > 0) {
      el.each(function () {
        const text = $(this).text();
        const data = text2img.draw(text);
        let img = document.createElement('img');
        img.src = data;
        $(this).html(img);
      });
    }
  },
  _judgePunctuationMarks: function (value) {
    const arr = ['.', ',', ';', '?', '!', ':', '\"', '，', '。', '？', '！', '；', '：', '、', '\''];
    for (let i = 0; i < arr.length; i++) {
      if (value === arr[i]) {
        return true;
      }
    }
    return false;
  }
};

window.text2img = text2img;
export default text2img;
